<docs>
  ## 新投递页面
  ### listBar的参数解构
  -  {name:'已查看',resid:'yck', dot:'5',index:0}
</docs>
<template>
  <div class="con-layout newDelivery noPadBottom">
    <div class="header">
      <span class="arrow" @click="back_btn"></span>
      <h3 class="title">新投递</h3>
    </div>
    <div class="content">
      <list-bar ref="listBar">
        <div
          class="list-bar-item"
          v-for="(item,index) in listBar"
          :key="index"
          :class="curIndex == index? 'active' :''"
          @click="triggerBar(item.index)"
        >
          <span>
            {{item.name}}
            <i v-if="item.dot">{{item.dot}}</i>
          </span>
        </div>
      </list-bar>
      <div class="sub-content">
        <!-- 职位筛选 -->
        <div class="slider-nav" ref="slideNav" v-show="sildeShow">
          <div class="slider-con">
            <span
              v-for="(item,index) in sliderArr"
              :key="index"
              :class="slideActiveArr.indexOf(item.zpgwid) > -1 ? 'active' :''"
              @click="slideClick(item.zpgwid)"
            >{{item.gwmc}}</span>
          </div>
        </div>
        <!-- 职位 -->
        <div class="resume-con" ref="resumeCon">
          <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad(curIndex)">
            <div
              class="resume-item"
              v-for="(item,index) in list"
              :key="index"
              @click="goLink(item)"
            >
              <div class="resume-delivery">
                <span>
                  投递给“
                  <b>{{item.gwmc}}</b>”的简历
                </span>
              </div>
              <div class="resume-person clearfix">
                <span class="name">{{item.jlmc}}</span>
                <span class="link">点击查看</span>
                <p class="date">{{item.djsj}}</p>
              </div>
            </div>
          </van-list>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import listBar from "base/listBar/listBar";
export default {
  components: { listBar },
  data() {
    return {
      pageNum: 1,
      pageSize: 10,
      list: [],
      loading: false,
      finished: false,
      listBar: [{ name: "未查看", index: 0 }, { name: "已查看", index: 1 }],
      curIndex: 0,
      sliderArr: [],
      slideActiveArr: [],
      sildeShow: true
    };
  },
  created() {
    this.jobList();
  },
  watch:{
    $route:{
      handler:function (val) {
        this.curIndex = val.query.type - 0;
      },
      immediate:true
    }
  },
  mounted() {},
  methods: {
    onLoad(flag, zpgwid) {
      let _flag = flag || 0;
      let _zpgwid = zpgwid || [];
      this.$http({
        url: "/msgl/sfckCx",
        method: "post",
        data: {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          sfck: _flag,
          zpgwids: _zpgwid
        }
      }).then(res => {
        // 加载状态结束
        this.loading = false;
        this.finished = false;
        let data = res.returnData;
        if (+data.executeResult == 1) {
          this.pageNum++;
          this.list.push(...data.gwxxCx);
          if (this.pageNum > res.pageCount) {
            // 数据加载完毕
            this.finished = true;
          }
        } else {
          this.sildeShow = false;
          this.finished = true;
          return false;
        }
      });
    },
    initScrollHeight() {
      let wH = document.body.clientHeight;
      let headH = this.$refs.head.$el.clientHeight;
      let listBarH = this.$refs.listBar.$el.clientHeight;
      let slideNavH = this.$refs.slideNav.clientHeight;
      let targetH = wH - headH - listBarH - slideNavH;
      this.$refs.resumeCon.style.height = targetH + "px";
    },
    jobList(curIndex) {
      this.$http({
        url: "/msgl/wcksygw",
        params: {
          czlx: curIndex || 0
        }
      }).then(res => {
        let _res = res.returnData;
        if (+_res.executeResult == 1) {
          this.sliderArr = _res.gwmc;
          this.sildeShow = true;
          this.$nextTick(() => {
            this.initScrollHeight();
          });
        }
      });
    },

    // listBar切换事件
    triggerBar(index) {
      this.sildeShow = false;
      this.curIndex = index;
      this.$router.push({query: {type:this.curIndex}});
      this.list = [];
      this.slideActiveArr = [];
      this.pageNum = 1;
      this.jobList(this.curIndex);
      this.onLoad(this.curIndex);
    },
    slideClick(item) {
      if (this.slideActiveArr.includes(item)) {
        this.slideActiveArr.splice(this.slideActiveArr.indexOf(item), 1);
      } else {
        this.slideActiveArr.push(item);
      }
      this.list = [];
      this.pageNum = 1;
      this.onLoad(this.curIndex, this.slideActiveArr);
    },
    goLink(item) {
      this.$loading = true;
      this.$http({
        url: "/dwgl/jlckBc",
        method: "post",
        data: {
          dwdjid: item.dwdjid,
          jlid: item.jlid,
          jlly: 10,
          tdjlid: item.tdjlid,
          ckjlid: item.ckjlid
        }
      }).finally(()=>{
        this.$loading = false;
      }).then(res => {
        let _res = res.returnData;
        if (+_res.executeResult == 1) {
          this.$router.push({
            path: "/resume/resumeDetail",
            query: {
              jlid: item.jlid,
              tdjlid: item.tdjlid,
              jlly: 10
            }
          });
        } else {
          this.alert({
            message: _res.message
          });
        }
      });
    },
    //返回简历页
    back_btn(){
      this.$router.push({path:'/resume'});
    }
  }
};
</script>

<style lang="scss" scoped>
.newDelivery {
  .sub-content {
    width: 100%;
    padding: 0 33px;
    box-sizing: border-box;
  }
}
</style>
